﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>bindings</title>

    <!-- WinJS references -->
    <script src="/scripts/winjscontrib/mcnext.ui.twowaybindings.js"></script>

    <link href="bindings.css" rel="stylesheet" />
    <script src="bindings.js"></script>
</head>
<body>
    <div class="bindings fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">custom bindings</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div id="pageHub" class="mcn-fullsize" data-win-control="MCNEXT.UI.HubControl" data-win-options="{multipass: 'item'}">
                <div class="mcn-hub-surface">
                    <div id="sectiontwoway" class="mcn-hub-section-titled" data-win-control="MCNEXT.UI.HubSection">
                        <h2><span class="mcn-hub-section-title">Two way<span class="navmark">&#xE013;</span></span></h2>
                        <div class="mcn-hub-section-content">
                            <label>two way binding update object when input field change.</label>
                            <p>
                                <input type="text" data-win-bind="value : objval MCNEXT.Bindings.twoWayOnChange">
                            </p>
                            <label>To update the label dynamically when object property change, object must be observable</label>
                            <p>
                                <span data-win-bind="innerText : objval"></span>
                            </p>
                        </div>
                    </div>
                    <div id="sectionarguments" class="mcn-hub-section-titled" data-win-control="MCNEXT.UI.HubSection">
                        <h2><span class="mcn-hub-section-title">Arguments<span class="navmark">&#xE013;</span></span></h2>
                        <div class="mcn-hub-section-content">
                            <label class="remark">string ellipse</label>
                            <div data-win-bind="innerText : objval MCNEXT.Bindings.toEllipsisized" data-win-bind-args='{ "ellipsisize" : 30}'></div>
                            <label>date formatting with moment.js</label>
                            <div data-win-bind="innerText : curDate MCNEXT.Bindings.formatDate" data-win-bind-args='{ "formatDate" : "L"}'></div>
                            <div data-win-bind="innerText : curDate MCNEXT.Bindings.formatDate" data-win-bind-args='{ "formatDate" : "DD-MM-YYYY HH:mm:ss"}'></div>
                        </div>
                    </div>
                    <div id="sectionsamples" class="mcn-hub-section-titled" data-win-control="MCNEXT.UI.HubSection">
                        <h2><span class="mcn-hub-section-title">Examples<span class="navmark">&#xE013;</span></span></h2>
                        <div class="mcn-hub-section-content">
                            <label>image below set as bg image. the binding defer imageloading and add a class when picture is loaded.<br /> you could use this class to make enter animation for pictures</label>
                            <div class="picture" data-win-bind="img : pic MCNEXT.Bindings.toSmartBgImage" style=""></div>
                            <label>text bellow does not show, it's hidden by a binding because undefined</label>
                            <div data-win-bind="innerText : doesNotExist; display : doesNotExist MCNEXT.Bindings.hideIfNotDefined"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</body>
</html>
